<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>赌我会瘦</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current activity-list-page bg-white">
      
      <header class="bar bar-nav fb-header">
        <a href="${ctx.host}/profile" class="icon icon-left pull-left"></a>
        <h1 class="title">我的活动</h1>
      </header>
      
      <div class="content">
        <div class="content-padded">
          <div class="buttons-tab fb-tab fixed-tab" data-offset="44">
            <a href="havascript:void(0);" class="active button">我参与的</a> <a href="${ctx.host}/profile/bets?type=support" class="button">我投注的</a>
          </div>
          <div class="tab-content">
            <div class="list-block media-list activity-list">
              <ul>
                <c:forEach items="${userBets}" var="item">

                  <li><a href="${ctx.host}/profile/bets/${item.bet.id}" class="item-content">
                      <div class="item-media">
                        <%-- <img src="${ctx.resource}/images/rule-cover.png" style="width: 4rem;"> --%>
                        <img src="${item.bet.avatar}" style="width: 4rem;">
                        <!--图片这里不清楚怎么处理先放着-->
                      </div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">
                            <div class="name">${item.bet.name}</div>
                            <p class="time no-margin">
                              <fmt:formatDate value="${item.bet.startDate}" pattern="MM-dd"/>&nbsp;至&nbsp;
                              <fmt:formatDate value="${item.bet.endDate}" pattern="MM-dd"/>
                            </p>
                          </div>
                          <div class="item-after">
                            <div class="label fb-label">${item.status.userDesc}</div>
                            <!--状态使用枚举显示，中文对应不知道怎么写-->
                          </div>
                        </div>
                        <div class="item-subtitle">
                          <div class="number">
                            <span style="color: #333;">${item.supportUsers}</span>
                            <p>参与人数</p>
                          </div>
                          <div class="bonus">
                            <span class="color-red">￥${item.bonus / 100}</span>
                            <p>奖金池</p>
                          </div>
                        </div>
                        <div class="item-text">
                          <div class="support-label active">
                            看好<span>${item.thumbup}人</span>
                          </div>
                          <div class="support-label nonsupport-label">
                            不看好<span>${item.thumbdown}人</span>
                          </div>
                        </div>
                      </div>
                  </a></li>
                </c:forEach>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/cmomon.js" />
  <script type="text/javascript">
      require(['page/common'], function(page) {
        page.init({
          "jsConfig": JSON.parse('${jsConfig}'),
          "avatar": '${user.avatar}',
          "userName": '${user.nickname}'
        })
      })
    </script>
</body>
</html>